<template>
  <div class="LoginStyleBox">
    <div class="LoginStyleRgba">
      <img
        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13945121728%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648033727&t=ab365f5d8bb9c3886613330010e0e9e7"
        alt=""
      />
    </div>
    <!-- 登录From表单 -->
    <div class="LoginFromBox">
      <p class="LoginUserStyleBox">
        <span class="LoginUserNameIpt">账号:</span
        ><input
          type="text"
          v-model="forFrom.phone"
          class="LoginUserIpt"
          name=""
          placeholder="请你输入账号"
        />
      </p>
      <p class="LoginPassStyleBox">
        <span class="LoginPassNameIpt">密码:</span
        ><input
          type="password"
          v-model="forFrom.password"
          class="LoginPassIpt"
          name=""
          placeholder="请你输入密码"
        />
      </p>
      <p class="LoginCodeStyleBox">
        <span class="LoginCodeStyleName">验证码:</span
        ><input
          type="text"
          class="LoginCodeIpt"
          name=""
          placeholder="验证码"
        /><span
          @click="LoginCodePass"
          style="
            background: #fff;
            width: auto;
            height: auto;
            display: inline-block;
            marginleft: 10px;
            borderradius: 5px;
          "
          v-html="text"
        ></span>
      </p>
      <p>
        <router-link class="RegOsTer" to="/register">注册账号</router-link
        ><a-button @click="LoginInterFace" class="LoginStyleBtn" type="primary"
          >登录</a-button
        >
      </p>
      <a
        :href="`https://gitee.com/oauth/authorize?client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=code`"
        ><b class="LenGlUn">&nbsp;第三方登录gitee</b></a
      >
    </div>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  data() {
    return {
      text: "", //验证码
      forFrom: {
        phone: "", //账号
        password: "", //密码
      },
      client_id:
        "3400cccebf48fae463f54a342e0c8a6b3c158a2f44081c6b07f1a767b7875f3c",
      redirect_uri: "http://127.0.0.1:7001/api/oauth/redirect",
    };
  },
  created() {
    //验证码
    this.LoginCodePass();
    //登录
    // this.LoginInterFace();
  },
  methods: {
    //验证码
    async LoginCodePass() {
      let res = await Axios.get("/api/getCode");
      console.log(res, "res");
      this.text = res.data.data;
    },
    //登录
    async LoginInterFace() {
      let res = await Axios.post("/api/login", { ...this.forFrom });
      window.localStorage.setItem("token", res.data.token);
      if (res.data.token) {
        this.$router.push("/home");
      } else {
        this.$router.push("/login");
      }
    },
  },
};
</script>

<style>
.RegOsTer {
  font-weight: bold;
  margin-left: 30px;
  margin-top: 0px;
  color: red;
  display: inline-block;
}
.LenGlUn{
  color: red;
}
.LoginStyleBox {
  width: 100%;
  height: 100%;
}
.LoginStyleRgba {
  width: 1000px;
  height: 600px;
  margin: 50px auto;
}
.LoginFromBox {
  top: 160px;
  right: 400px;
  width: 400px;
  height: 280px;
  border-radius: 20px;
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
}
.RegisterBtn {
  margin-top: 15px;
  margin-left: 20px;
  font-weight: bold;
  display: inline-block;
}
.LoginUserIpt {
  width: 260px;
  margin-left: 10px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
}
.LoginPassIpt {
  width: 260px;
  margin-left: 10px;
  margin-top: 10px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
}
.LoginPassTpt {
  width: 260px;
  margin-left: 20px;
  margin-top: 30px;
  height: 40px;
  padding: 5px;
  outline: none;
  border-radius: 7px;
}
.LoginStyleBtn {
  width: 100px;
  height: 40px;
  padding: 5px;
  outline: none;
  display: inline-block;
  position: absolute;
  right: 50px;
  border-radius: 7px;
  background: #1884f2;
  color: #ffff;
  font-size: 16px;
  margin-top: 30px;
}
.SecurityCode {
  width: 100px;
  position: absolute;
  top: 160px;
  left: 80px;
  margin-left: 140px;
  width: auto;
  border-radius: 5px;
  height: auto;
  background: rgb(243, 246, 250);
}
.IptCode {
  margin-left: 80px;
  height: 35px;
  width: 130px;
  outline: none;
  padding: 5px;
  border-radius: 5px;
}
.LoginUserNameIpt,
.LoginPassNameIpt {
  font-size: 20px;
  padding: 0px 5px;
  font-weight: bold;
}
.LoginCodeStyleName {
  font-size: 15px;
  font-weight: bold;
  padding: 0px 5px;
}
.LoginCodeIpt {
  width: 120px;
  height: 30px;
  outline: none;
  padding: 5px;
  margin-left: 10px;
  border-radius: 5px;
}
.LoginStyleBtn {
  width: 220px;
  margin-left: 70px;
  top: 180px;
  position: absolute;
}
</style>